<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <link rel="stylesheet" type="text/css" href="/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/res/layui/css/layui.css">
  <script type="text/javascript" src="/res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="/index" >首页</a>
      </p>
      <div class="sn-quick-menu">
        <div>
          <li class="layui-nav-item" lay-unselect="">
            <div id=" " >
              <div style="margin-right: 5px">
                <img id="userImg" th:if="${session.userImg != null}"  th:src="${session.userImg}"  class="layui-nav-img">
              </div>
              <div id="username" style="color: crimson;margin-right: 6px;font-size: 24px" th:text="${session.userName}"></div>&nbsp;&nbsp;
            </div>
            <!--<dl class="layui-nav-child">-->
            <!--<dd><a href="javascript:;">修改信息</a></dd>-->
            <!--<dd><a href="javascript:;">安全管理</a></dd>-->
            <!--<dd><a href="javascript:;">退了</a></dd>-->
            <!--</dl>-->
          </li>
        </div>
        <div class="login"><a href="/login.html"><p th:text="${session.userName!=null?'':'登录'}"></p>&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color:coral;margin-right: 6px;font-size: 15px" href="/myself">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color: coral;margin-right: 6px;font-size: 15px" href="/showShopCart">购物车</a><span th:text="${size}"></span></div>
        <div class="sp-cart myorder"><a href="/showOrder">&nbsp;&nbsp;&nbsp;我的订单</a></div>
      </div>
    </div>
  </div>


  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="/index" title="母婴商城">
            <img src="/res/static/img/logo.png">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base shopcart-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="/show" class="active">所有商品</a>
            <a href="/bulk">今日折扣</a>
            <a href="information.html">母婴资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-bg w1200">
      <h3>夏季清仓</h3>
      <p>宝宝被子、宝宝衣服3折起</p>
    </div>
    <div class="cart w1200" th:if=" ${username} eq '1'">
      <div class="cart-table-th">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="allCheckked" type="checkbox" value="true">
            </div>
          <label>&nbsp;&nbsp;全选</label>
          </div>
        </div>
        <div class="th th-item">
          <div class="th-inner">
            商品
          </div>
        </div>
        <div class="th th-price">
          <div class="th-inner">
            单价
          </div>
        </div>
        <div class="th th-amount">
          <div class="th-inner">
            数量
          </div>
        </div>
        <div class="th th-sum">
          <div class="th-inner">
            小计
          </div>
        </div>
        <div class="th th-op">
          <div class="th-inner">
            操作
          </div>
        </div>
      </div>
      <div class="OrderList">
        <div class="order-content" id="list-cont">

          <ul class="item-content layui-clear" th:each="hashmap:${hashMap}">
            <!--<input type="hidden"  class="shopcartId"  th:text="${st.shopcartId}"/>-->
            <li class="th th-chk">
              <div class="select-all">
                <div class="cart-checkbox">
                  <input class="CheckBoxShop check" id="" type="checkbox" num="all" name="select-all" value="true">
                  <input type="hidden"  class="shopcartId" value="" th:attr="value=${hashmap.key.shopcartId}"/>
                </div>
              </div>
            </li>
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img th:src="${hashmap.value.consultImgUrl}" alt=""></a>
                <div class="text">
                  <div class="title" th:text="${hashmap.value.goodsDescribe}"></div>
                  <p><span th:text="${hashmap.key.cartGoodsAttributeId}"></span>  </p>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su" th:text="${hashmap.key.cartGoodsPrice}"></span>
            </li>
            <li class="th th-amount">
              <div class="box-btn layui-clear">
                <div class="less layui-btn">-</div>
                <input  class="Quantity-input" type="" name="" th:attr="value=${hashmap.key.cartGoodsNum}" disabled="disabled">
                <div class="add layui-btn">+</div>
              </div>
            </li>
            <li class="th th-sum">
              <span class="sum" th:text="${hashmap.key.cartSubtotal}"></span>
            </li>
            <li class="th th-op">

              <span class="dele-btnSelf" th:onclick="'deleteSelf('+${hashmap.key.shopcartId}+')'">删除</span>
            </li>
          </ul>

        </div>
      </div>

      <div class="FloatBarHolder layui-clear">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="" name="select-all" type="checkbox"  value="true">
            </div>
            <label>&nbsp;&nbsp;已选<span class="Selected-pieces">0</span>件</label>
          </div>
        </div>
        <div class="th batch-deletion">
          <span class="batch-dele-btn">批量删除</span>
        </div>
        <div class="th Settlement pay">
          <button class="layui-btn">结算</button>
        </div>
        <div class="th total">
          <p>应付：<span class="pieces-total">0</span></p>
        </div>
      </div>
    </div>

    <div class="cart w1200" th:if=" ${username} eq '0'">
      <span>请先登录！</span>
    </div>
  </div>

<script type="text/javascript">
  layui.config({
    base: '/res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','jquery','element','car'],function(){
    var mm = layui.mm,$ = layui.$,element = layui.element,car = layui.car;

    // 模版导入数据
    // var html = demo.innerHTML,
    // listCont = document.getElementById('list-cont');
    // mm.request({
    //   url: '../json/shopcart.json',
    //   success : function(res){
    //     listCont.innerHTML = mm.renderHtml(html,res)
    //     element.render();
    //     car.init()
    //   },
    //   error: function(res){
    //     console.log(res);
    //   }
    // })
    //
    car.init();


});

  function  deleteSelf(shopcartId){
      layui.use(['layer','jquery'],function () {
          var layer=layui.layer,
              $=layui.jquery;
          // if(layer.confirm("你确定要删除吗？")){
          //     $.ajax({
          //         type: 'post',
          //         url: "/deleteShopCart",
          //         data: {"shopcartId":shopcartId},
          //         // 成功的回调
          //         success:function(boolean) {
          //             if(boolean=="true"){
          //                 window.location.reload();
          //             }
          //             if(boolean=="false"){
          //                 layer.msg("删除失败！")
          //             }
          //         }
          //     })
          // }
          layer.confirm('你确定要删除吗',  function(){

              $.ajax({
                          type: 'post',
                          url: "/deleteShopCart",
                          data: {"shopcartId":shopcartId},
                          // 成功的回调
                          success:function(boolean) {
                              if(boolean=="true"){
                                  window.location.reload();
                              }
                              if(boolean=="false"){
                                  layer.msg("删除失败！")
                              }
                          }
                      })

          });
      })


  }
</script>
</body>
</html>